<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import TheHeader from '@/components/layout/TheHeader.vue'
import TheFooter from '@/components/layout/TheFooter.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const currentUser = computed(() => authStore.user)
const activeMenu = computed(() => route.name)

const logout = () => {
  authStore.logout()
  router.push('/')
}
</script>

<template>
  <div class="user-layout">
    <TheHeader />
    
    <div class="user-container container">
      <aside class="user-sidebar">
        <div class="user-profile">
          <div class="user-avatar">
            <img 
              v-if="currentUser?.avatar?.imageName" 
              :src="`http://localhost:8080/api/image/${currentUser.avatar.imageName}`" 
              :alt="currentUser?.name || currentUser?.login_name"
            >
            <img v-else src="@/assets/default-avatar.png" alt="默认头像">
          </div>
          <div class="user-info">
            <h3 class="user-name">{{ currentUser?.name || currentUser?.login_name }}</h3>
            <p class="user-email">{{ currentUser?.email }}</p>
          </div>
        </div>
        
        <nav class="user-nav">
          <router-link 
            to="/user/dashboard" 
            class="nav-item" 
            :class="{ active: activeMenu === 'dashboard' }"
          >
            仪表盘
          </router-link>
          
          <router-link 
            to="/user/profile" 
            class="nav-item" 
            :class="{ active: activeMenu === 'profile' }"
          >
            个人资料
          </router-link>
          
          <router-link 
            to="/user/my-blogs" 
            class="nav-item" 
            :class="{ active: activeMenu === 'my-blogs' }"
          >
            我的博客
          </router-link>
          
          <router-link 
            to="/user/create-blog" 
            class="nav-item" 
            :class="{ active: activeMenu === 'create-blog' }"
          >
            发布博客
          </router-link>
          
          <router-link 
            to="/user/blog-types" 
            class="nav-item" 
            :class="{ active: activeMenu === 'blog-types' }"
          >
            分类管理
          </router-link>
          
          <router-link 
            to="/user/blogs" 
            class="nav-item" 
            :class="{ active: activeMenu === 'BlogManage' }"
          >
            博客管理
          </router-link>
          
          <div class="nav-divider"></div>
          
          <button @click="logout" class="nav-item logout-btn">
            退出登录
          </button>
        </nav>
      </aside>
      
      <main class="user-content">
        <router-view />
      </main>
    </div>
    
    <TheFooter />
  </div>
</template>

<style>
.user-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);
}

.user-container {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  flex: 1;
}

.user-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.user-profile {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
  overflow: hidden;
}

.user-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email {
  font-size: 0.9rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-nav {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.nav-item {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--text-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--primary-color);
}

.nav-item.active {
  background-color: rgba(74, 111, 165, 0.05);
  border-left-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
}

.logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--error-color);
}

.logout-btn:hover {
  background-color: rgba(217, 83, 79, 0.05);
}

.nav-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.5rem 0;
}

.user-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
}

@media (max-width: 992px) {
  .user-container {
    flex-direction: column;
  }
  
  .user-sidebar {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  
  .user-nav {
    display: flex;
    flex-wrap: wrap;
  }
  
  .nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--primary-color);
  }
  
  .nav-divider {
    display: none;
  }
  
  .logout-btn {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .user-content {
    padding: 1.5rem;
  }
  
  .user-nav {
    flex-direction: column;
  }
}
</style> 